<template>
	<view>
		<view class="head">
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhuib.png" mode=""></image>
			<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">团购核销</view>
			<view class="mt-dy">
				<image class="mt" src="../../static/index/mt.png" mode=""></image>
				<image class="dy" src="../../static/index/dy.png" mode=""></image>
			</view>
		</view>
		
		<view class="Verification z-flex-x-s-b">
			<input type="text" placeholder="点击输入团购券码" />
			<image src="../../static/index/scanQRcodes.png" mode=""></image>
		</view>
		
		<view class="conversion-btn">兑换</view>
		
		<view class="usage-box">
			<view class="usage-title">团购券码使用方法</view>
			<view class="usage-each">1、先选择门店和要使用的桌台</view>
			<view class="usage-each">2、到了现场之后复制填入券码</view>
			<view class="usage-each">3、确认后点击立即开台，即可自动开台计费</view>
			<view class="usage-each">4、到时间自动关台结束计费</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuH: uni.getStorageSync('menuH') || '',
				safeTop: uni.getStorageSync('safeTop') || 20 + 'px'
			}
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F8FA;
	}
	.head {
		width: 750rpx;
		height: 524rpx;
		background: linear-gradient(to bottom, #e6f6f2, #ddf0f5,#F6F7FA);
		position: relative;
		.fanhui-img {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			margin-left: 32rpx;
		}
		.head-name {
			font-weight: bold;
			font-size: 34rpx;
			color: #203460;
			text-align: center;
		}
		
		.mt-dy {
			width: 232rpx;
			margin: auto;
			display: flex;
			justify-content: center;
			margin-top: 180rpx;
			image {
				width: 116rpx;
				height: 116rpx;
			}
			.mt {
				position: relative;
				left: 16rpx;
				z-index: 1;
			}
			.dy {
				position: relative;
				right:16rpx
			}
		}
	}
	
	.Verification {
		width: 558rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx;
		margin: auto;
		margin-top: 16rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.conversion-btn {
		width: 622rpx;
		height: 106rpx;
		background: #4BC264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 800;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 106rpx;
		text-align: center;
		margin: auto;
		margin-top: 64rpx;
	}
	
	.usage-box {
		text-align: center;
		// margin-top: 56rpx;
		.usage-title {
			font-weight: bold;
			font-size: 26rpx;
			color: #1C274C;
			margin: 56rpx 0 16rpx 0;
		}
		.usage-each {
			font-weight: 500;
			font-size: 22rpx;
			color: #A4A9B7;
			line-height: 36rpx;
		}
	}
</style>
